import React,{useEffect, useState} from "react";
import './index.scss';
import registerLogo from '../../asstes/register.png'
import type { FormProps } from 'antd';
import { Button, Form, Input } from 'antd';
import axios from "axios";
import { useNavigate } from "react-router";
import instance from '../../utlis/index'
const onFinish: FormProps<FromDataRawStore>['onFinish'] = (values) => {
  console.log('Success:', values);
};

const onFinishFailed: FormProps<FromDataRawStore>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
interface FromDataRawStore{
    password:string,
    username:string,
    code:string
}
const Index:React.FC=()=>{
    const [code,setCode] = useState<string>('')
    const [codes,setcodes] = useState<string>('')
    const [password,setPassword]= useState<string>('')
    const [password1,setPassword1]= useState<string>('')
    const [username,setUsername]= useState<string>('')
    const navigate = useNavigate()
     // 获取验证码
      const getCode= async()=>{
        try {
            const config ={
                url:'/api/get_code',
                method:'get',
            }
            const res = await instance(config)
            console.log(res)
              setCode( code => res.data.data) 
        } catch (error) {
            console.log(error)
        }
    } 
    
    // 注册
    const handerSubmit = async()=>{
         try {
            const config = {
            url:'/api/register',  
            method:'post',
            data:{
               username:username,
               password:password,
               password1:password1,
               code:codes
            }
        }
        const res = await instance(config)
           console.log(res)
         } catch (error) {
            console.log(error)
         }
    }
    // 跳转登录页
    const handerLogin=()=>{
        navigate('/login')
    }

    useEffect(()=>{

    },[])
    return(
        <div className="container">
            <div className="left">
                <img src={registerLogo} alt="" />
            </div>
            <div className="right">
               <div>
                   <div>
                     <h1>系统登录</h1>
                     <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                            label="账户"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                            <Input value={username} onChange={(e)=>setUsername(e.target.value)}/>
                            </Form.Item>

                            <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                            >
                            <Input.Password value={password} onChange={(e)=>setPassword(e.target.value)}/>
                            </Form.Item>
                            <Form.Item
                            label="再次输入密码"
                            name="password1"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                            >
                            <Input.Password value={password1} onChange={(e)=>setPassword1(e.target.value)}/>
                            </Form.Item>
                            <Form.Item
                            label="验证码"
                            rules={[{ required: true, message: 'Please input your codes!' }]}
                            name="codes"  
                            >
                            <Input value={codes} onChange={(e)=>setcodes(codes=> e.target.value)}/>
                            </Form.Item>


                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary"  onClick={()=>handerSubmit()}>
                                注册
                            </Button>
                            </Form.Item>
                            
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button onClick={()=>handerLogin()}>
                               Or去登录
                            </Button>
                            </Form.Item>
                    </Form>  
                   </div>
                    <div 
                    onClick={()=>getCode()}
                    >
                         {
                        code?(
                            <div dangerouslySetInnerHTML={{ __html: code }} />
                        ):(
                            <div>No code available</div>
                        )
                    }
                    </div>
               </div>
            </div>
           <div>
          
            
           </div>

        </div>
    )
}
export default Index